<!--
- Author:  Lgh.
- Date:    2018/8/24.
- File:    底部tab
-->
<template>
  <div style="width: 100%; height: 5rem; position: relative; bottom: 0;">
    <div class="footer-tab">
      <nav class="footer-tab-nav">
        <ul>
          <li :class="{ 'on': item.name == $route.name }" v-for="item in list">
            <a href="javascript:void(0)" @click="go(item.name)">
              <svg class="icon" aria-hidden="true">
                <use xlink:href="" :xlink:href="item.icon"></use>
              </svg>
              <!--<i class="iconfont" :class="[ item.icon ]" v-show="item.name != $route.name"></i>-->
              <!--<i class="iconfont" :class="[ item.icon2 ]" v-show="item.name == $route.name"></i>-->
              <p>{{item.title}}</p>
            </a>
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          title: '首页',
          name: 'Home',
          icon: '#icon-shouye',
          icon2: '#icon-shouyeon'
        },
        {
          title: '我的',
          name: 'my-my',
          icon: '#icon-yonghu-xianxing',
          icon2: '#icon-yonghu-xianxingon'
        }
      ]
    }
  },
  props: {},
  created () {
  },
  methods: {
    go (routerName) {
      this.$router.push({name: routerName})
    }
  }
}
</script>

<style lang="less">
  .footer-tab {
    &-nav {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 5rem !important;
      border-top: #d0cfcd solid 1px;
      background: #ffffff;
      z-index: 10;
      ul {
        height: 100%;
      }
      li {
        position: relative;
        float: left;
        width: 50%;
        height: 100%;
        text-align: center;
        color: #898989;
        line-height: 100%;
        i {
          display: block;
          font-size: 2rem;
          line-height: 5rem;
          margin-top: 0.7rem;
        }
        p {
          font-size: 1.2rem;
          line-height: 2.5rem;
        }
        a {
          color: inherit;
          display:inline-block;
        }
        .num {
          position: absolute;
          left: 4.3rem;
          top: 0.3rem;
          display: block;
          width: 1.3rem;
          height: 1.3rem;
          line-height: 1.3rem;
          font-size: 1rem;
          color: #fff;
          text-align: center;
          background: #ffffff;
          border-radius: 50%;
        }
      }
      li.on {
        color: #3a3a3e;
      }
      .icon {
        margin-top: 0.3rem;
        font-size: 2rem;
      }
    }
  }
</style>
